<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../css/utils/bootstrap.min.css" />
    <link rel="stylesheet" href="../../css/utils/common.css" />
    <link rel="stylesheet" href="../../css/utils/toastr.min.css" />
	<title></title>
	<style>
		.input-btn-group {
			width: 382px;
			margin: 40px auto;
		}
		.input-btn-group input[type='text'] {
			float: left;
			width: 300px;
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
		}
		.input-btn-group .btn {
			background-color: #11B5AB;
			border-color: #11B5AB;
			color: #fff;
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
		}
		.input-btn-group .btn:focus, .input-btn-group .btn:hover {
			color: #fff;
			background-color: #2aeee2;
			border-color: #2aeee2;
		}
		.label-group .label {
			display: inline-block;
			padding: 3px 25px;
			margin-right: 20px;
			margin-bottom: 20px;
			background-color: #E1E1E1;
			color: #848484;
			cursor: pointer;
			border-top-left-radius: 10px;
			border-top-right-radius: 10px;
			border-bottom-left-radius: 10px;
			border-bottom-right-radius: 10px;
		}
		.label-group .label.active {
			background-color: #11B5AB;
			color: #fff;
		}
		/*----------标签编辑弹框-----------*/
		.uiwm-label-input {
		    margin: 40px auto;
		    width: 360px;
		    height: 40px;
		}
		.uiwm-label-input input {
		    border-radius: 0;
		    height: 40px;
		    width: 260px;
		    border-right: none;
		}
		.uiwm-label-input button {
		    width: 100px;
		    height: 40px;
		    background: #11B5AB;
		    border: none;
		    border-radius: 0;
		}
		/*----------标签编辑弹框-----------*/
	</style>
</head>
<body>
	<div class="content">
		<div id="tab-panel3" class="tab-pane">
	  		<div class="input-btn-group">
	  			<input type="text" id="lableName" maxlength="6" class="form-control" placeholder="新建标签（限6字）">
	  			<button type="button" class="btn btn-default">新建标签</button>
	  		</div>
	  		<div class="label-group">
			</div>
		</div>
	</div>
	
	<script type="text/javascript" src="../../js/utils/jquery-1.12.4.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/bootstrap.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/bootstrap-treeview.js" ></script>
	<script type="text/javascript" src="../../js/utils/jquery.cookie.js" ></script>
	<script type="text/javascript" src="../../js/utils/boot.js" ></script>
	<script type="text/javascript" src="../../js/utils/toastr.min.js" ></script>
	<script>
		var userID = $.cookie("userID");
		var companyID = $.cookie("companyID");
		$(function() {
			toastr.options = {
                "closeButton": true,
                "timeOut": 2000,
                "positionClass": "toast-center"
           };
       		//获取获取公司全部标签
			getLableList();
		})
		function getLableList() {
			base.postData(base.url.lableList, {userID:userID,companyID:companyID}, callbackLableList);	
		}
		//公司标签列表返回
		function callbackLableList(data) {
			if (data.success) {
				var lableList = data.context.dataList;
				var html = ''
				for (var i=0; i<lableList.length; i++) {
					html += '<span class="label label-default" data-param="'+lableList[i].id+'">'+lableList[i].lableName+'</span>';
				}
				$(".label-group").html(html);
			}
		}
		//编辑标签
		$("#updateLabel").on("click", function(e) {
	    		var _lableTagName = $("#lableTagName").val();
	    		var _lableID = $("#lableID").val();
			base.postData(base.url.edtLable, {lableID:_lableID,lableName:_lableTagName,companyID:companyID}, function(data){
				$('#editLabelModal').modal('hide');
				if (data.success) {
					getLableList();
					toastr.success(data.msg);
				} else {
					toastr.error(data.msg);
				}
			});
     	});
		//添加标签
		$(".tab-pane").on("click", "button", function() {
			var _lableName = $("#lableName").val();
			base.postData(base.url.addLable, {lableName:_lableName,companyID:companyID}, callbackAddLable);
		})
		function callbackAddLable(data) {
			if (data.success) {
				getLableList();//重新获取并刷新数据
				toastr.success(data.msg);
			} else {
				toastr.error(data.msg);
			}
		}
		$(".label-group").on("click", "span", function() {
			var lableID = $(this).attr("data-param");
			var lableTagName = $(this).text();
			$("#lableID").val(lableID);
			$("#lableTagName").val(lableTagName);
			$('#editLabelModal').modal('show');
		})
	</script>
</body>
</html>
